<template>
	<pd-popup ref="popup" @change="popupChangeHandler">
		<view class="__pd_date_range_picker">
			<slot>
				<view class="_text_size_38 _text_weight_bold _text_align_center _ptb_32">请选择出发时间</view>
			</slot>
			<view class="__picker_area">
				<picker-view 
					:value="result"
					@pickstart='pickerInScrolling = true' 
					@pickend='pickerInScrolling = false'
					@change="pickerChangeHandler" v-if="result.length"
					indicator-style="height: 50px;font-weight:bold;">
					<picker-view-column class="__picker_view">
						<view class="__picker_item" :class="{ '__picker_active': index === result[0] }"
							v-for="(item, index) in pickerOps[0]" :key="index">{{ PD.Filters.Common.sortDateString(item)
							}}</view>
					</picker-view-column>
					<picker-view-column class="__picker_view">
						<view class="__picker_item" :class="{ '__picker_active': index === result[1] }"
							v-for="(item, index) in pickerOps[1]" :key="index">{{ PD.Filters.Common.padStartZero(item)
							}}</view>
					</picker-view-column>
					<picker-view-column class="__picker_view">
						<view class="__picker_item" :class="{ '__picker_active': index === result[2] }"
							v-for="(item, index) in pickerOps[2]" :key="index">{{ PD.Filters.Common.padStartZero(item)
							}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<slot name="hit"></slot>
			<view class="__picker_footer">
				<button type="default" @tap="cancelHandler">取消</button>
				<button type="primary" :disabled="pickerInScrolling" @tap="confirmHandler">确认</button>
			</view>
		</view>
	</pd-popup>
</template>

<script setup lang="ts">
import PdPopup from './pd-popup.vue';
import { useCompRef } from '@/pd-libs/hooks/useRefs';
import PD from '../libs';
import type { WxFormChangeRes } from '../libs/wx-types';
import type { TsHelp } from '../libs/ts-help';
const result = ref<number[]>([0, 0, 0]);//所选下标
const pickerOps = ref<Array<number[]>>([]);//选项数据
const now = new Date();

let maxDay = 30;//最大天数

const popup = useCompRef(PdPopup);
const pickerInScrolling = ref(false);

let resolver: TsHelp.PromiseResolver<{ value: number }>;
let rejecter: () => void;
type Ops = {
	maxDay?: number,//最大天数，如果传入，则会生成maxDay的天数，如：传入5，只会生成5天
};
const open = (ops?: Ops): Promise<{ value: number }> => {
	return new Promise((r, j) => {
		(ops && ops.maxDay) && (maxDay = ops.maxDay);
		resolver = r;
		rejecter = j;
		result.value = [];
		initOps();
		popup.value?.open();
	});
};

const pickerChangeHandler = (e: WxFormChangeRes<number[]>) => {
	if (e.detail.value[0] === 0) {
		pickerOps.value[1] = PD.Tool.createArray(now.getHours(), 23);
		pickerOps.value[2] = PD.Tool.createArray(now.getMinutes(), 59);
	} else {
		pickerOps.value[1] = PD.Tool.createArray(0, 23);
		pickerOps.value[2] = PD.Tool.createArray(0, 59);
	};
	result.value = e.detail.value;
};

const initOps = () => {
	pickerOps.value = [
		PD.Tool.createArray(0, maxDay).map(v => {
			return new Date(new Date().toLocaleDateString()).getTime() + v * PD.Constant.DAY_MINISECONDS;
		}),
		PD.Tool.createArray(now.getHours(), 23),
		PD.Tool.createArray(now.getMinutes(), 59),
	];
	result.value = [0,0,0];
};



const confirmHandler = () => {
	resolver && resolver({
		value: pickerOps.value[0][result.value[0]] + pickerOps.value[1][result.value[1]] * PD.Constant.HOUR_MINISECONDS + pickerOps.value[2][result.value[2]] * PD.Constant.MINUTE_MINISECONDS
	});
	popup.value?.close();
};

const cancelHandler = () => {
	rejecter && rejecter();
	popup.value?.close();
};

const popupChangeHandler = (show: boolean) => {
	!show && cancelHandler();
};

defineExpose({
	open,
});

</script>

<style scoped lang="less">
.__pd_date_range_picker {
	padding: 32rpx 24rpx;
	background: #fff;
	border-radius: 16rpx 16rpx 0 0;

	.__picker_area {
		font-size: 28rpx;
		--h: 350rpx;

		.__picker_view {
			height: var(--h);
		}

		.__picker_item {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.__picker_active {
			font-size: 38rpx;
			font-weight: bold;
			color: var(--primary);
		}

		.__buffer_tag {
			width: 50rpx;
			text-align: center;
			height: var(--h);
			line-height: var(--h);
		}
	}

	.__picker_footer {
		margin-top: 50rpx;
		display: flex;
		gap: 32rpx;

		button {
			flex: 1;
		}
	}
}
</style>